<template>
  <div class="favorite" ref="homePage">
    <div class="bj">
      <van-nav-bar @click-left="clickleft" style="background: #ececec;color: #46d0ca;" title="我喜欢" left-text="" left-arrow>
        <div slot="right" style="color: #46d0ca;" class="searcha">
        </div>
      </van-nav-bar>
    </div>

    <van-dropdown-menu active-color="#46d0ca ">
      <van-dropdown-item v-model="value1" @change="change" :options="option1" />
    </van-dropdown-menu>
    <div style="width: 100%;height: 86px;"></div>
    <div v-show="listdata ==null" class="wudingdan">
      <van-icon name="description" />
      <p>亲,暂无相关数据哦</p>
    </div>
    <div v-show="listdata !=null" class="center">
      <div class="item" v-for="(itme,index) in listdata" :key="index">
        <div class="item_center">
          <div class="item">
            <img :src="itme.Cover" />
            <div class="tet_box">
              <p class="title">{{itme.Title}}</p>
              <!-- <p class="date">收藏日期：2019-10-09</p> -->
            </div>
          </div>
        </div>
        <van-button type="primary" @click="ondelete(itme.SN)" color="#46d0ca" size="mini" class="btn">删除</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  MyMarkList,
  MyMarkDo
} from '@/api/home.js'
export default {

  data () {
    return {
      clintHeigth: '', //获取页面高度
      value1: "Resource",
      option1: [
        { text: '景区', value: "Resource" },
        { text: '文章', value: "Article" },
        { text: '店铺', value: "Shop" },
      ],
      listdata: [],
    }
  },

  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 100;
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    this.MyMarkList();
  },
  methods: {
    clickleft () {
      this.$router.back(-1);
      // console.log(1)
    },
    ondelete (sn) {
      console.log(sn)
      this.$dialog.confirm({
        message: '确定删除'
      }).then(() => {
        let data = {
          Type: 2,
          Module: this.value1,
          SN: sn,
          DoType: "Del",
        }
        MyMarkDo(data).then(res => {
          console.log(res)
          //this.listdata = res.List
            MyMarkList ()
        })
      });
    },
    change (value) {
      console.log(value)
      this.MyMarkList()
    },
    MyMarkList () {
      let data = {
        Type: 2,
        NextSN: 0,
        Module: this.value1,
      }
      MyMarkList(data).then(res => {
        console.log(res)
        this.listdata = res.List
      })
    },
  }
}
</script>

<style lang="scss">
.favorite {
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .van-dropdown-menu {
    position: fixed;
    top: 46px;
    width: 100%;
    z-index: 999;
  }
  .center {
    .item {
      position: relative;

      .item_center {
        .item {
          border-bottom: 0.0625rem solid #eee;
          display: flex;
          align-items: center;
          padding: 10px 20px;
          background: #ffffff;

          img {
            height: 6.125rem;
          }

          .tet_box {
            // width: 14.75rem;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .title {
              line-height: 1.125rem;
              height: 2.5rem;
              width: 180px;
              padding: 0 10px;
            }

            .date {
              color: #666;
              font-size: 12px;
              margin-bottom: 0.125rem;
            }

            .tags {
              display: flex;
              align-items: center;
              span {
                font-size: 12px !important;
              }
            }
          }
        }
      }

      .btn {
        position: absolute;
        right: 0.625rem;
        top: 30px;
        font-size: 12px;
      }
    }
  }
}
</style>
